<template>
  <div id="works">
    <ElRow type="flex" justify="center">
      <ElCol :xs="{ span: 22 }" :md="{ span: 17 }">
        <ul :style="{}">
          <li
            :style="{
              backgroundColor:
                item.bgcolor || Color[Math.round(Math.random() * 8) + 1],
            }"
            v-for="(item, i) in list"
            :key="i"
          >
            <!-- <div style="display: flex">
              <i :style="{ backgroundImage: 'url(' + item.image + ')' }"></i>
              <h2>
                {{ item.title }}
              </h2>
            </div> -->
            <h2>
              {{ item.title }}
            </h2>
            <p style="min-height: 110px">{{ item.describe }}</p>
            <p>核心技能：{{ item.core }}</p>
            <a @click="goto(item)" href="javascript::">作品详情</a>
            <a v-if="item.href" :href="item.href">作品浏览</a>
            <a v-if="itme.gitHref" :href="item.gitHref">github</a>
          </li>
        </ul>
      </ElCol>
    </ElRow>
  </div>
</template>
<script>
import { GET_ARTICLE_LIST } from "@/api/Article";
export default {
  name: "",
  data() {
    return {
      list: [],
      Color: {
        1: "#00978a",
        2: "#0097f2",
        3: "#00abf5",
        4: "#00bed6",
        5: "#8cd1c5",
        6: "#ff9100",
        7: "#ff4600",
        8: "#805242",
      },
    };
  },
  created() {
    this.init();
    for (let index = 0; index < 10; index++) {
      console.log(Math.random() * 5);
    }
  },
  methods: {
    init() {
      this.isload = true;
      GET_ARTICLE_LIST({ tag: "作品", page: 1, limit: 10 }).then((res) => {
        console.log("作品列表=>>", res);
        this.list = res.data;
        setTimeout(() => {
          this.isload = false;
        }, 1000);
      });
    },
    goto(item) {
      localStorage.setItem("item", JSON.stringify(item));
      localStorage.setItem("is", true);
      this.$router.push({ name: "ArticleDetailed" });
    },
  },
};
</script>
<style lang='scss' scoped>
#works {
  ul {
    display: flex;
    color: #fff;
    flex-direction: column;
    li {
      width: 100%;
      box-sizing: border-box;
      background-color: red;
      transition: all 1s;
      padding: 0px 10px;
      height: 73px;
      overflow: hidden;
      & > div {
        align-items: center;
        i {
          width: 40px;
          height: 40px;
          // background-color: red;
          background-size: 100%;
          background-repeat: no-repeat;
        }
      }

      h2 {
        // background-color: #fff;
        white-space: nowrap;
        overflow: hidden;
        width: initial;
        text-overflow: ellipsis;
        font-size: 1.5em;
      }
      a {
        padding-right: 20px;
        color: #fff;
        font-weight: 700;
        transition: font-size 0.5s;
        text-decoration: underline;
        &:hover {
          color: #ff9100;
          font-size: 20px;
        }
      }
      &:hover {
        // width: 500px;
        height: 300px;
      }
      &:nth-child(1) {
        background-color: #00978a;
      }
      &:nth-child(2) {
        background-color: #0097f2;
      }
      &:nth-child(3) {
        background-color: #00abf5;
      }
      &:nth-child(4) {
        background-color: #00bed6;
      }
      &:nth-child(5) {
        background-color: #00978a;
      }
      &:nth-child(6) {
        background-color: #8cd1c5;
      }
      &:nth-child(7) {
        background-color: #ff9100;
      }
      &:nth-child(8) {
        background-color: #ff4600;
      }
      &:nth-child(9) {
        background-color: #805242;
      }
    }
  }
}
</style>